<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>今天吃什么 - 随机推荐</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
    }
    .food-card {
      transition: all 0.3s ease;
    }
    .food-card.animate {
      transform: scale(0.95);
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    .pulse {
      animation: pulse 1s infinite;
    }
  </style>
</head>
<body class="pb-16">
  <!-- 引入组件模板 -->
  <iframe src="components.html" class="hidden" id="components-frame"></iframe>
  
  <!-- 顶部导航栏 -->
  <div class="bg-white shadow-md px-4 py-3 flex items-center justify-between">
    <div class="flex items-center">
      <button class="mr-2 text-gray-600" onclick="window.history.back()">
        <i class="fas fa-arrow-left"></i>
      </button>
      <h1 class="text-lg font-medium text-gray-800">随机推荐</h1>
    </div>
    <div>
      <button class="text-gray-600 px-2">
        <i class="fas fa-sliders-h"></i>
      </button>
    </div>
  </div>
  
  <!-- 随机推荐区域 -->
  <div class="px-4 py-6">
    <div class="text-center mb-6">
      <h2 class="text-xl font-bold mb-2">今天吃什么？</h2>
      <p class="text-gray-500 text-sm">让我们帮你做决定！</p>
    </div>
    
    <!-- 随机卡片区域 -->
    <div class="relative h-96 flex justify-center items-center" id="random-container">
      <div class="absolute inset-0 flex justify-center items-center" id="loading-container">
        <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-orange-500"></div>
      </div>
      
      <div class="food-card hidden w-full max-w-sm" id="food-card">
        <div class="bg-white rounded-xl overflow-hidden shadow-lg">
          <img src="https://images.unsplash.com/photo-1555126634-323283e090fa" alt="美食图片" class="w-full h-56 object-cover" id="food-image">
          <div class="p-5">
            <div class="flex justify-between items-start">
              <h3 class="text-xl font-bold text-gray-900" id="food-name">香辣牛肉面</h3>
              <button class="text-gray-400 hover:text-red-500">
                <i class="far fa-heart text-xl"></i>
              </button>
            </div>
            <p class="text-gray-600 mt-2" id="food-info">¥28 · 15分钟 · 中式面食</p>
            <div class="flex items-center mt-3">
              <div class="flex text-yellow-400">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
              </div>
              <span class="text-sm text-gray-500 ml-1">4.5 (328条评价)</span>
            </div>
            <div class="mt-4 flex justify-between items-center">
              <span class="inline-block bg-orange-100 text-orange-600 text-sm px-3 py-1 rounded-full" id="food-tag">午餐热门</span>
              <span class="text-sm text-gray-500">500m</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex justify-center mt-6 space-x-4">
      <button id="reject-btn" class="bg-white border border-gray-300 text-gray-700 rounded-full w-14 h-14 flex items-center justify-center shadow-sm">
        <i class="fas fa-times text-xl"></i>
      </button>
      <button id="random-btn" class="bg-orange-500 text-white rounded-full w-16 h-16 flex items-center justify-center shadow-md pulse">
        <i class="fas fa-dice text-2xl"></i>
      </button>
      <button id="accept-btn" class="bg-white border border-gray-300 text-gray-700 rounded-full w-14 h-14 flex items-center justify-center shadow-sm">
        <i class="fas fa-check text-xl"></i>
      </button>
    </div>
    
    <!-- 提示文本 -->
    <p class="text-center text-gray-500 text-sm mt-6">
      不满意？点击骰子按钮继续随机！
    </p>
  </div>
  
  <!-- 底部导航栏 -->
  <div id="bottom-nav"></div>
  
  <script>
    // 食物数据
    const foods = [
      {
        name: "香辣牛肉面",
        price: "¥28",
        time: "15分钟",
        type: "中式面食",
        img: "https://images.unsplash.com/photo-1555126634-323283e090fa",
        tag: "午餐热门"
      },
      {
        name: "意式肉酱披萨",
        price: "¥58",
        time: "25分钟",
        type: "意式料理",
        img: "https://images.unsplash.com/photo-1513104890138-7c749659a591",
        tag: "同事最爱"
      },
      {
        name: "日式照烧鸡饭",
        price: "¥32",
        time: "12分钟",
        type: "日式料理",
        img: "https://images.unsplash.com/photo-1569058242567-93de6c36f198",
        tag: "快速送达"
      },
      {
        name: "麻辣香锅",
        price: "¥45",
        time: "20分钟",
        type: "川菜",
        img: "https://images.unsplash.com/photo-1563379926898-05f4575a45d8",
        tag: "辣味十足"
      },
      {
        name: "三明治套餐",
        price: "¥22",
        time: "8分钟",
        type: "西式快餐",
        img: "https://images.unsplash.com/photo-1528735602780-2552fd46c7af",
        tag: "速食首选"
      }
    ];
    
    // 等待组件iframe加载完成
    document.getElementById('components-frame').onload = function() {
      const componentsDoc = document.getElementById('components-frame').contentDocument;
      
      // 插入底部导航
      const bottomNavTemplate = componentsDoc.getElementById('bottom-nav-template');
      document.getElementById('bottom-nav').innerHTML = bottomNavTemplate.innerHTML;
      
      // 设置当前页面导航项为活跃状态
      const randomLink = document.querySelector('#bottom-nav a[href="random.html"]');
      const randomIcon = randomLink.querySelector('i');
      const randomText = randomLink.querySelector('span');
      randomIcon.classList.replace('text-gray-400', 'text-orange-500');
      randomText.classList.replace('text-gray-600', 'text-orange-500');
      
      // 获取元素
      const foodCard = document.getElementById('food-card');
      const foodImage = document.getElementById('food-image');
      const foodName = document.getElementById('food-name');
      const foodInfo = document.getElementById('food-info');
      const foodTag = document.getElementById('food-tag');
      const loadingContainer = document.getElementById('loading-container');
      const randomBtn = document.getElementById('random-btn');
      const acceptBtn = document.getElementById('accept-btn');
      const rejectBtn = document.getElementById('reject-btn');
      
      // 随机选择食物
      function getRandomFood() {
        return foods[Math.floor(Math.random() * foods.length)];
      }
      
      // 显示随机食物
      function showRandomFood() {
        // 显示加载动画
        foodCard.classList.add('hidden');
        loadingContainer.classList.remove('hidden');
        
        // 模拟加载延迟
        setTimeout(() => {
          const food = getRandomFood();
          
          // 更新卡片内容
          foodImage.src = food.img;
          foodName.textContent = food.name;
          foodInfo.textContent = `${food.price} · ${food.time} · ${food.type}`;
          foodTag.textContent = food.tag;
          
          // 隐藏加载动画，显示食物卡片
          loadingContainer.classList.add('hidden');
          foodCard.classList.remove('hidden');
          
          // 添加动画效果
          foodCard.classList.add('animate');
          setTimeout(() => {
            foodCard.classList.remove('animate');
          }, 300);
        }, 800);
      }
      
      // 初始加载
      showRandomFood();
      
      // 绑定按钮事件
      randomBtn.addEventListener('click', showRandomFood);
      
      // 接受按钮 - 跳转到详情页
      acceptBtn.addEventListener('click', () => {
        window.location.href = 'detail.html';
      });
      
      // 拒绝按钮 - 重新随机
      rejectBtn.addEventListener('click', showRandomFood);
    };
  </script>
</body>
</html> 